import { Form, Input ,Button} from 'antd-mobile'
import { useCountDown } from '../hooks'
import { useNavigate } from 'react-router-dom'
import useDounce from '../hooks/useDounce'
function Login(){
    const nav=useNavigate()
    const [fn,num,isDisabled]=useCountDown()
    const onSubmit=useDounce(()=>{
        console.log('ok')
         nav('/home')
    })
    return (
        <div>
             <Form layout='horizontal' mode='card' 
             footer={
                <Button block type='submit' color='primary' size='large' onClick={onSubmit}>
                  提交
                </Button>}
             >
       
        <Form.Item label='手机号'>
          <Input placeholder='请输入' />
        </Form.Item>
        <Form.Item label='短信验证码'  extra={<Button fill='none' onClick={()=>fn()} disabled={isDisabled}>{isDisabled?`${num}s后重新获取`:'获取验证码'}</Button>}>
          <Input placeholder='请输入' />
        </Form.Item>
        </Form>
        </div>
    )
}
export default Login